<template>
  <div class="box">
    <div class="list">
      <div style="text-align: center;">排名</div>
      <div>开发商</div>
      <div v-if="type == 1">挪用资金</div>
      <div v-else>项目剩余货值</div>
    </div>
    <div class="center list" v-for="(item, index) in data" :key="index">
      <div style="text-align: center;">{{ ++index }}</div>
      <div @click="go(index - 1)">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content=" item.groupName ? item.groupName : item.projectName"
          placement="top"
          >
          {{ item.groupName ? item.groupName : item.projectName}}
        </el-tooltip>
      </div>
      <div :class="type == 1 ? 'bgLiner' : 'bgLiners'">￥{{ type == 1 ? item.embezzleAmount : item.residueCurrencyValue }}</div>
    </div>
    <el-pagination
      layout="prev, pager, next"
      v-model:current-page="current"
      :page-size="PageSize"
      :total="total"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted, watch, getCurrentInstance } from "vue";
import { selectCapitalInfo, selectCurrencyInfo } from "@/api/bjBuilding";

const props = defineProps({
  parms: Object,
  type: Number,
  types: {
    type: String,
    default: "开发商",
  },
});
let { proxy } = getCurrentInstance();

var current; //当前页
const PageSize = ref(5); //每页显示数据
const total = ref(null); //总数据

const emit = defineEmits(["getCurrent"]);

const data = ref(null);

const useSelectCapitalInfo = async () => {
  if (props.type == 1) {
    await selectCapitalInfo(props.parms).then((res) => {
      data.value = res.data.records;
      current = res.data.current;
      total.value = res.data.total;
      // emit('getCurrent',str)
    });
  } else if (props.type == 2) {
    await selectCurrencyInfo(props.parms).then((res) => {
      data.value = res.data.records;
      current = res.data.current;
      total.value = res.data.total;
    });
  }
};

// 分页
const handleCurrentChange = (newPage) => {
  props.parms.pageNumber = newPage;
  useSelectCapitalInfo();
};

// 调整详情
// 调整详情
const go = (index) => {
  if (props.types == "开发商") {
    proxy.$goDetail(data.value[index].groupName);
  } else {
    proxy.$goProDetail(data.value[index].borrowXmId, data.value[index].projectName);
  }
};

onMounted(() => {
  useSelectCapitalInfo();
});

const someMethod = () => {
  return {
    total,
  };
};
</script>

<style scoped lang="less">
.box {
  padding: 25px 15px;
  padding-bottom: 0px;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.list {
  font-size: 16px;
  color: rgba(151, 171, 234, 1);
  display: flex;
  align-items: center;
}
.list > div:nth-child(1) {
  width: 10%;
}
.list > div:nth-child(2) {
  width: 20%;
  width: 60px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  cursor: pointer;
}
.list:not(:first-child) > div:nth-child(3) {
  font-weight: 500;
  color: #e9e9e9;
  width: 70%;
  height: 20px;
  padding-left: 10px;
}
.bgLiner {
  background: linear-gradient(to right, rgba(24, 81, 189, 1), rgba(66, 127, 239, 1));
}
.bgLiners {
  background: linear-gradient(to right, rgba(7, 137, 129, 1), rgba(64, 227, 210, 1));
}

.list:not(:first-child) {
  height: 20px;
  display: flex;
  align-items: center;
  padding: 30px 0px;
}
::v-deep .el-pagination {
  position: absolute;
  right: 5px;
  bottom: 1px !important;
  li {
    background: rgba(7, 68, 153, 0);
  }
  button {
    background: rgba(7, 68, 153, 0);
  }
  .btn-prev {
    background: rgba(7, 68, 153, 0) !important;
  }
  .is-last {
    background: rgba(7, 68, 153, 0) !important;
  }
}
</style>
